<template>
    <div
        class="page-container"
        style="height:auto;"
    >
        <div
            class="in-container"
            style="height:auto;"
        >
            <div class="from-container">
                <AppSearchForm
                    @submit="getList()"
                    @reset="reset()"
                >
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="开航日期">
                                <el-date-picker
                                    v-model="sailTime"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    style="width: 100%;"
                                    size="small"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="装箱日期">
                                <el-date-picker
                                    v-model="packingTime"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    style="width: 100%;"
                                    size="small"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="业务编号">
                                <el-input
                                    v-model="query.BussinessNo"
                                    clearable
                                    placeholder=" "
                                    style="width:100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="提单号">
                                <el-input
                                    v-model="query.BlNo"
                                    clearable
                                    placeholder=" "
                                    style="width:100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="发票号">
                                <el-input
                                    v-model="query.InvoiceNo"
                                    clearable
                                    placeholder=" "
                                    style="width:100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="费用类型">
                                <el-select
                                    v-model="query.Feename"
                                    placeholder="请选择费用类型"
                                    style="width: 100%;"
                                    filterable
                                    clearable
                                    remote
                                    :remote-method="getFeeType"
                                    :loading="feenameLoading"
                                >
                                    <el-option
                                        v-for=" item in feenameList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="对账单号">
                                <el-input
                                    v-model="query.FinaceCode"
                                    clearable
                                    placeholder=" "
                                    style="width:100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="收付类型">
                                <el-radio-group v-model="query.IsIncome">
                                    <el-radio :label="0">付款</el-radio>
                                    <el-radio :label="1">收款</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-col :span="6">
                        <el-form-item
                            label="结算对象名称"
                            label-width="120px"
                        >
                            <el-select
                                v-model="query.EntId"
                                placeholder="请选择结算对象"
                                style="width: 100%;"
                                clearable
                                filterable
                                remote
                                :remote-method="getBusDetail"
                                :loading="settlementLoading"
                            >
                                <el-option
                                    v-for="item in settlementList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                    <span style="float: left;">{{ item.label }}</span>
                                    <span style="float: right;">{{ item.entFullname }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </AppSearchForm>
            </div>
            <div class="btn-box">
                <el-button
                    type="default"
                    icon="RefreshRight"
                    @click="getList"
                >
                </el-button>
                <el-button
                    type="primary"
                    @click="add"
                >
                    新增
                </el-button>
            </div>
            <AppPageTable
                stripe
                :data="tableData.data"
                @change="getList"
                :autostyle="'height: calc(100% - 150px);'"
                :option="tableData.option"
                @update:option="upDataOption"
                v-loading="tableDataLoading"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                    fixed="left"
                />
                <el-table-column
                    width="60"
                    label="序号"
                    type="index"
                    fixed="left"
                >
                </el-table-column>
                <el-table-column
                    prop="balanceDoccode"
                    label="对账单号"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    width="100"
                    label="收付款类型"
                >
                    <template #default="scope">
                        {{ scope.row.isIncome ? "收款" : "付款" }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="entFullname"
                    width="100"
                    label="结算对象"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="doccode"
                    width="100"
                    label="业务编号"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="recDate"
                    label="接单日期"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="etd"
                    label="开航日期"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="blNo"
                    label="提单号"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="feeCode"
                    label="费用类型"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="单价"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="digit"
                    label="数量"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="totalmoney"
                    label="金额"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="natMoney"
                    label="折人民币"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="getUnVerificationMoney"
                    label="未销金额"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="getVerificationMoney"
                    label="已销金额"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="currency"
                    label="币种"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="invoiceCode"
                    label="发票号"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="entFullname"
                    label="结算对象名称"
                    width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
            </AppPageTable>

            <!-- 新增对账弹框 -->
            <el-dialog
                v-model="addShow"
                title="新增对账"
                width="600px"
                align-center
            >
                <el-form
                    :model="formAdd"
                    :label-width="80"
                    :rules="rules"
                    ref="ruleFormRef"
                    :show-message="false"
                >
                    <el-form-item
                        label="账单号"
                        prop="Doccode"
                    >
                        <el-input
                            v-model="formAdd.Doccode"
                            style="width: 100%;"
                            placeholder="请输入账单号"
                        />
                    </el-form-item>
                    <el-form-item
                        label="结算对象"
                        prop="EntId"
                    >
                        <el-select
                            v-model="formAdd.EntId"
                            placeholder="请选择结算对象"
                            style="width: 100%;"
                            clearable
                            filterable
                            remote
                            @change="changeOfSettle"
                            :remote-method="getBusDetail"
                            :loading="settlementLoading"
                        >
                            <el-option
                                v-for="item in settlementList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                                <span style="float: left;">{{ item.label }}</span>
                                <span style="float: right;">{{ item.entFullname }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收付类型">
                        <el-radio-group v-model="formAdd.Doctype">
                            <el-radio :label="1">应收</el-radio>
                            <el-radio :label="0">应付</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input
                            v-model="formAdd.Memo"
                            :rows="2"
                            type="textarea"
                            placeholder=" "
                        />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div style="text-align: center;">
                        <el-button @click="addShow = false">取消</el-button>
                        <el-button
                            type="primary"
                            @click="submit"
                        >
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
export default defineComponent({
    components: {
        AppSearchForm,
        AppPageTable,
    },
    props: {},
    computed: {
        // 开航日
        sailTime: {
            get: function () {
                return [this.query.StartEtd, this.query.EndEtd];
            },
            set: function (val) {
                if (val) {
                    this.query.StartEtd = val[0];
                    this.query.EndEtd = val[1];
                } else {
                    this.query.StartEtd = "";
                    this.query.EndEtd = "";
                };
            },
        },
        // 装箱日期
        packingTime: {
            get: function () {
                return [this.query.StartPackTime, this.query.EndPackTime];
            },
            set: function (val) {
                if (val) {
                    this.query.StartPackTime = val[0];
                    this.query.EndPackTime = val[1];
                } else {
                    this.query.StartPackTime = "";
                    this.query.EndPackTime = "";
                };
            },
        },
    },
    watch: {
    },
    data() {
        return {
            show: false,
            //表格数据
            tableData: {
                data: [],
                option: useTableOption(),
            },
            tableDataLoading: false,
            // 查询条件
            query: {
                // 起始开航日
                StartEtd: "",
                // 截止开航日
                EndEtd: "",
                // 开始装箱日
                StartPackTime: "",
                // 结束装箱日
                EndPackTime: "",
                // 结算对象Id
                EntId: "",
                // 币种
                Currency: "",
                // 业务编号
                BussinessNo: "",
                // 提单号
                BlNo: "",
                // 对账单号
                FinaceCode: "",
                // 费用名称
                Feename: "",
                // 发票号
                InvoiceNo: "",
                // 审核状态 0未审 1已审
                CheckStatus: 1,
                // 费用类型
                FeeType: 0,
                // 收支类型 0 付款 1 收款
                IsIncome: 0,
            },
            //费用类型
            feenameList: [],
            feenameLoading: false,
            addShow: false,
            // 新增
            formAdd: {
                FeeIds: [],//WorkFee id列表
                // Doccode: "",//账单号
                EntId: "",//结算对象id
                EntFullname: "",//结算对象名称
                Doctype: 0,//收付类型   1 应收   0应付
                // Memo: "",//备注
            },
            rules: {
                Doccode: [{ required: true, message: '请输入账单号', trigger: 'blur' }],
                EntId: [{ required: true, message: '请选择结算对象', trigger: 'change' }],
            },
            settlementLoading: false,
            settlementList: [],
        }
    },
    methods: {
        // 获取费用类型
        async getFeeType(val) {
            this.feenameLoading = true;
            let res = await this.$http.get("/api/base/feetype/query", { KeyWords: val, });
            res.content.forEach(item => {
                item.label = item.feeName;
                item.value = item.feeName;
            });
            this.feenameList = res.content;
            this.feenameLoading = false;
        },

        // 获取结算对象的数据
        async getBusDetail(val) {
            this.settlementLoading = true;
            let res = await this.$http.get("/api/buenterprise/dropdownlist", {
                KeyWords: val,
            });
            res.forEach(item => {
                item.label = item.entCode;
                item.value = item.id;
            });
            this.settlementList = res;
            this.settlementLoading = false;
        },

        //结算对象改变
        changeOfSettle(val) {
            if (val) {
                for (const iterator of this.settlementList) {
                    if (iterator.id == val) {
                        this.formAdd.EntFullname = iterator.entName;
                    };
                };
            } else {
                this.formAdd.EntFullname = "";
            };
        },

        // 新增对账
        add() {
            if (this.tableData.option.selected.length === 0) {
                this.$message.warning("请至少选择一条数据");
                return
            };
            let EntIdHasSame = false;
            // this.addShow = true;
            this.formAdd = {
                FeeIds: [],//WorkFee id列表
                // Doccode: "",//账单号
                EntId: this.tableData.option.selected[0].entId,//结算对象id
                EntFullname: this.tableData.option.selected[0].entFullname,//结算对象名称
                Doctype: this.query.IsIncome,//收付类型   1 应收   0应付
                // Memo: "",//备注
            };
            for (const iterator of this.tableData.option.selected) {
                this.formAdd.FeeIds.push(iterator.id);
                if (this.formAdd.EntId != iterator.entId) {
                    EntIdHasSame = true;
                };
            };
            if (EntIdHasSame) {
                this.$message.warning("当前选择的数据的结算对象不一致！");
                return;
            };
            this.submit();
            // this.$nextTick(() => {
            //     this.$refs.ruleFormRef.resetFields();
            // });
        },

        // 重置
        reset() {
            const notReset = ["Currency", "CheckStatus", "IsIncome"];
            let queryKeys = Object.keys(this.query);
            for (const item of queryKeys) {
                if (notReset.indexOf(item) === -1) {
                    this.query[item] = "";
                };
            };
            this.query.IsIncome = 0;
            this.query.CheckStatus = 1;
            this.query.FeeType = 0;
            this.tableData.option.page = 1;
        },

        // 列表数据
        async getList() {
            this.tableDataLoading = true;
            // 查询条件转化
            let queryKeysList = Object.keys(this.query);
            let search = {
                current: this.tableData.option.page,
                pageSize: this.tableData.option.pageSize,
                feeParams: []
            };
            for (const iterator of queryKeysList) {
                if (this.query[iterator] !== "") {
                    let keyObject = {
                        key: iterator,
                        value: this.query[iterator],
                    };
                    search.feeParams.push(keyObject);
                };
            };
            let res = await this.$http.post("/api/docworkfee/selectBalanceFeeDialogList", search);
            if (res.status) {
                res.data.list.forEach(item => {
                    item.recDate = item.recDate ? dayjs(item.recDate).format("YYYY-MM-DD") : "";
                    item.etd = item.etd ? dayjs(item.etd).format("YYYY-MM-DD") : "";
                    item.invoiceDate = item.invoiceDate ? dayjs(item.invoiceDate).format("YYYY-MM-DD") : "";
                    item.createtime = item.createtime ? dayjs(item.createtime).format("YYYY-MM-DD HH:mm:ss") : "";
                });
                this.tableData.data = res.data.list;
                this.tableData.option.total = res.data.totalElements;
            } else {
                ElMessage.warning(res.message);
            };
            this.tableDataLoading = false;
        },

        // 提交
        async submit() {
            // await this.$refs.ruleFormRef.validate();
            let res = await this.$http.post("/api/docbalance/createBalance", this.formAdd);
            if (res.status) {
                // this.addShow = false;
                this.getList();
                this.$message.success(res.message);
            } else {
                this.$message.warning(res.message);
            };
        },

    },
    watch: {

    },

    created() {

    }
});
</script>

<style
    lang="scss"
    scoped
>
.container {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    background-color: white;
    padding: 8px;
}

.from-container {
    border: 1px solid #e8e8e8;
    padding: 6px;
}

.btn-box {
    margin-top: 8px;
    margin-bottom: 8px;
}


:deep(.el-form-item--small .el-form-item__label) {
    font-size: 12px;
    color: rgba(0, 0, 0, .85);
}

:deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
}

:deep(.el-form-item--small.el-form-item) {
    margin-bottom: 8px;
}

:deep(.el-form--inline .el-form-item) {
    display: flex;
}
</style>
